<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择器的优先级</title>
<style>
li{background:green;} /* 1 */
ol li{background:red;} /* 1+1 */

.A{background:blue;} /* 10 */
.B{background:yellow;} /* 10+ */		/*同级(.A和.B)的情况下，后写的优先级高*/

#box{background:pink;}	/* 100 */
#box1{background:black;}
</style>

</head>

<body>

<ol>
    <li>li ====》 ol li > li</li>
    <br/>
    <li class="A">class="A" ======》 .A > ol li</li>
    <li class="B">class="B" ======》 .B > .A</li>
    <li class="A B">class="A B" ====》 .B > .A</li>	<!--优先级跟此处的排列顺序无关，显示为黄色-->
    <li class="B A">class="B A" ====》 .B > .A</li>	<!--优先级跟此处的排列顺序无关，显示为黄色-->
    <br/>
    <li class="B" id="box">class="B" id="box" ====》 id > class</li>	  <!--100-->
    <br/>
    <li style="background:orange;" id="box1">style="background:orange" id="box1" ====》 行间样式 > id</li>  <!--1000-->
    <br/>
    <li id="box2" style="background:purple;">Javascript ====》 JavaScript > 行间样式</li>  <!--10000-->
    <script>
    document.getElementById('box2').style.background= "gray";
    </script>
  </ol>
  <h3>标签选择器1 < class类选择器10+ < id选择器100 < 行间样式1000 < JavaScript10000</h3>
  <p>我们假设数字表示优先级</p>
</body>
</html>
